<template>
  <el-dialog title="选择智能标签" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="850px" class="dialog_nopadd">
    <div class="dialog-big">
      <ul class="talList">
        <li v-for="(item,index) in tabList" :class="active==index ?`active`:``" :key="index" @click="getActive(index)">{{ item.value }}</li>
      </ul>
      <el-form :style="{height}">
        <div class="search-title">
          <div class="search">
            <el-input v-model="input2" placeholder="搜标签组/标签名" clearable size="small"/>
            <el-button icon="el-icon-search" size="small"></el-button>
          </div>
<!--          生命周期没有新建标签组的代码-->
          <el-button plain style="margin-left: 10px;" @click="handelAddLabelGroup" size="small"><i class="el-icon-plus"></i>新建标签组</el-button>
        </div>
        <el-form-item v-for="(item, index) in dataList" :key="index">
          <div class="item-title">
            <el-checkbox
              @change="(val) => handleCheckAllListChange(val, item)"
              :indeterminate="itemIndeterminate(item)"
              v-model="item.checkAll">
              {{ item.label }}
            </el-checkbox>
            <span class="addSpan" @click="getAddLabel"><i class="el-icon-plus"></i>新增标签</span>
          </div>
          <el-checkbox-group
            v-model="checkedData" @change="handleCheckedCitiesChange">
            <!--            显示以id为主，不然不回显-->
            <el-checkbox v-for="items in item.child" :key="items.field" :label="items.field">{{ items.label }}
            </el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button>提交</el-button>
    </div>
    <addLabelGroup v-if="showAddLabelGroup" :visableIf.sync="showAddLabelGroup"></addLabelGroup>
    <addLabel v-if="showAddLabel" :visableIf.sync="showAddLabel"></addLabel>
  </el-dialog>
</template>

<script>

export default {
  name: 'selectSmartTags',
  components: {
    'addLabelGroup': () => import('./addLabelGroup.vue'),//导出弹窗
    'addLabel': () => import('./addLabel.vue'),//导出弹窗
  },
  data() {
    return {
      showAddLabelGroup: false,
      showAddLabel: false,
      tabList: [
        {id: 1, value: '行为',},
        {id: 1, value: '生命周期',}
      ],
      active: 0,
      value: false,
      input2: null,//标签名
      form: {
        label: null,//搜索标签
      },
      dataList: [
        {
          field: "gasUser",
          label: "社群行为",
          child: [
            {
              field: "userId",
              label: "未入常规群",
              dictKey: null,
              dateFormat: null
            },
            {
              field: "userName",
              label: "已入常规群",
              dictKey: null,
              dateFormat: null
            }
          ]
        },
        {
          field: "gasUserInfo",
          label: "私聊活跃度",
          child: [
            {
              field: "certificateType",
              label: "新好友1小时未发言",
              dictKey: "certificate_type",
              dateFormat: null
            },
            {
              field: "certificateNo",
              label: "持续3天未发言",
              dictKey: null,
              dateFormat: null
            }
          ]
        },

      ],
      checkedData: [], //选择多选框时选中的值
    }
  },
  created() {
    //  this.getList();
  },
  mounted() {
  },
  props:{
    height:{
      type:String,
      default:'auto'
    }
  },
  watch: {},
  methods: {
    handelAddLabelGroup() {
      this.showAddLabelGroup = true;
    },
    getAddLabel() {
      //新建标签
      this.showAddLabel = true;
    },
    getActive(index) {
      this.active = index;
      if (index == 0) {
        this.dataList = [
          {
            field: "gasUser",
            label: "社群行为",
            child: [
              {
                field: "userId",
                label: "未入常规群",
                dictKey: null,
                dateFormat: null
              },
              {
                field: "userName",
                label: "已入常规群",
                dictKey: null,
                dateFormat: null
              }
            ]
          },
          {
            field: "gasUserInfo",
            label: "私聊活跃度",
            child: [
              {
                field: "certificateType",
                label: "新好友1小时未发言",
                dictKey: "certificate_type",
                dateFormat: null
              },
              {
                field: "certificateNo",
                label: "持续3天未发言",
                dictKey: null,
                dateFormat: null
              }
            ]
          },

        ];
      } else {
        this.dataList = [
          {
            field: "1",
            label: "孕周期",
            child: [
              {
                field: "2",
                label: "孕4周",
                dictKey: null,
                dateFormat: null
              },
              {
                field: "3",
                label: "孕5周",
                dictKey: null,
                dateFormat: null
              }
            ]
          },

        ];
      }
      this.dataList.forEach(item => {
        item.checkAll = true;
        item.child.forEach(sitem => {
          if (!this.checkedData.includes(sitem.field)) {
            item.checkAll = false;
          }
        });
      });
    },

    // 全选
    handleCheckAllListChange(val, item) {
      console.log('val', val);
      console.log('item', item);
      if (val) {
        //全选时
        item.child.forEach(sitem => {
          this.checkedData.push(sitem.field)
        })
      } else {
        item.child.forEach(sitem => {
          this.checkedData = this.checkedData.filter((vitem => {
            return sitem.field !=vitem;
          }))
        })
      }
    },
    // 是否全选
    itemIndeterminate(item) {
      console.log('item', item);
      return !item.checkAll && item.child.some(sitem=>this.checkedData.includes( sitem.field));
    },
    handleCheckedCitiesChange(val) {
      this.dataList.forEach(item => {
        item.checkAll = true;
        item.child.forEach(sitem => {
          if (!val.includes(sitem.field)) {
            item.checkAll = false;
          }
        });
      });
      this.$forceUpdate();

    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.dialog-big {
  display: flex;

  .dialog-title {
    display: flex;
    background-color: #f9f9f9;
    height: 44px;
    align-items: center;
    outline: 1px solid #e9e9e9;
    padding: 0 16px;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

::v-deep .el-dialog__body {
  overflow-y: auto;
  max-height: 700px;
  // padding: 0px 0px 20px 20px;
}
  .el-form {
    padding: 0px;
    flex: 1;

    .search-title {
      display: flex;
      align-items: center;
      grid-gap: 8px;
      gap: 8px;
      padding: 10px 12px;
      background: #fafafa;
      border-bottom: 1px solid #e9e9e9;
    }

    .item-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f7f7f7;
      height: 40px;
      padding: 0 12px;
      border-bottom: 1px solid #e9e9e9;
    }

    .el-form-item {
      border: 1px solid #eee;
      margin: 10px;

      .el-checkbox-group {
        padding-left: 10px;

        .el-checkbox {
        }

      }
    }

  }

  .el-switch {
    margin-right: 10px;
  }
// }

.addSpan {
  color: #3070ff;
  cursor: pointer;
}

.talList {
  display: flex;
  flex-direction: column;
  width: 120px;
  border-right: 1px solid #eee;

  li {
    list-style: none;
    padding: 8px 24px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;

    &.active {
      color: #3070ff;

      &:after {
        content: '';
        height: 100%;
        width: 2px;
        position: absolute;
        right: 0px;
        background: #3070ff;
        top: 0px;

      }
    }
  }
}

.search {
  display: flex;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
</style>
